<template>
  <el-col :span="$store.state.isMobile ? 24 : buttonData.span" class="jrButton">
    <template v-for="(item, index) in buttonData.data">
      <el-upload
        v-if="item.upload"
        class="upload-demo inline-block "
        ref="upload"
        :http-request="handleImport"
        action=""
        :key="index"
        :auto-upload="true"
      >
        <el-button
          :type="item.type ? item.type : 'primary'"
          @click="buttonClick(item.click)"
          :disabled="item.disabled ? selects.length === 0 || disabled : false"
          :icon="item.icon ? item.icon : ''"
          :size="$store.state.mobileButton"
          :style="item.color ? 'background:#' + item.color : null"
        >
          {{ item.name }}
        </el-button>
      </el-upload>
      <el-button
        v-else
        :type="item.type ? item.type : 'primary'"
        :key="index"
        @click="buttonClick(item.click)"
        :disabled="item.disabled ? selects.length === 0 || disabled : false"
        :icon="item.icon ? item.icon : ''"
        :size="$store.state.mobileButton"
        :style="item.color ? 'background:#' + item.color : null"
      >
        {{ item.name }}
      </el-button>
    </template>
  </el-col>
</template>

<script>
export default {
  name: "jrButton",
  data() {
    return {};
  },
  props: {
    buttonData: {
      type: Object,
      default: () => {},
    },
    selects: {
      type: Array,
      default: () => [],
    },
    disabled: {
      type: Boolean,
      default: () => false,
    },
  },
  created() {
    console.log(window.localStorage.href);
  },
  methods: {
    buttonClick(name) {
      this.$emit(name);
    },
    handleImport(params) {
      this.$emit("handleImport", params);
    },
  },
};
</script>

<style type="text/css" scoped>
.jrButton >>> .el-button--mini {
  margin-left: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
}
.jrButton >>> .el-button--medium {
  margin-bottom: 5px;
}
.inline-block {
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
}
</style>
